<template>
  <div class="dashboard-container">
    <div class="container">
      <div class="tableBar">
        <label style="margin-right: 10px">套餐名称：</label>
        <el-input v-model="input"
                  placeholder="请填写套餐名称"
                  style="width: 14%"
                  clearable
                  @clear="init"
                  @keyup.enter.native="initFun"/>

        <label style="margin-right: 10px; margin-left: 20px">套餐分类：</label>
        <el-select v-model="categoryId"
                   style="width: 14%"
                   placeholder="请选择"
                   clearable
                   @clear="init">
          <el-option v-for="item in options"
                     :key="item.id"
                     :label="item.name"
                     :value="item.id"/>
        </el-select>

        <label style="margin-right: 10px; margin-left: 20px">售卖状态：</label>
        <el-select v-model="status"
                   style="width: 14%"
                   placeholder="请选择"
                   clearable
                   @clear="init">
          <el-option v-for="item in statusArr"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value"/>
        </el-select>
        <el-button class="normal-btn continue"
                   @click="pageQuery">
          查询
        </el-button>
        <div class="tableLab">
          <span class="delBut non"
                @click="handleDelete('B')">批量删除</span>
          <!-- <span class="blueBug non" @click="statusHandle('1')">批量启售</span>
          <span
            style="border: none"
            class="delBut non"
            @click="statusHandle('0')"
            >批量停售</span
          > -->
          <el-button type="primary"
                     style="margin-left: 15px"
                     @click="addSetMeal('add')">
            + 新建套餐
          </el-button>
        </div>
      </div>
      <el-table v-if="records.length"
                :data="records"
                stripe
                class="tableBox"
                @selection-change="handleSelectionChange">
        <el-table-column type="selection"
                         width="25"/>
        <el-table-column prop="name"
                         label="套餐名称"/>
        <el-table-column prop="image"
                         label="图片">
          <template slot-scope="{ row }">
            <el-image style="width: 80px; height: 40px; border: none; cursor: pointer"
                      :src="row.image">
              <div slot="error"
                   class="image-slot">
                <img src="./../../assets/noImg.png"
                     style="width: auto; height: 40px; border: none">
              </div>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="categoryName"
                         label="套餐分类"/>
        <el-table-column prop="price"
                         label="套餐价">
          <template slot-scope="scope">
            <span>￥{{ ((scope.row.price).toFixed(2) * 100) / 100 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="售卖状态">
          <template slot-scope="scope">
            <div class="tableColumn-status"
                 :class="{ 'stop-use': String(scope.row.status) === '0' }">
              {{ String(scope.row.status) === '0' ? '停售' : '启售' }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="updateTime"
                         label="最后操作时间">
          <!-- <template slot-scope="scope">
            {{ moment(scope.row.lastUpdateTime).format('YYYY-MM-DD h:m:s') }}
          </template> -->
        </el-table-column>
        <el-table-column label="操作"
                         width="250"
                         align="center">
          <template slot-scope="scope">
            <el-button type="text"
                       size="small"
                       class="blueBug"
                       @click="addSetMeal(scope.row)">
              修改
            </el-button>
            <el-button type="text"
                       size="small"
                       class="delBut"
                       @click="handleDelete('S', scope.row.id)">
              删除
            </el-button>
            <el-button type="text"
                       size="small"
                       class="blueBug non"
                       :class="{
                         blueBug: scope.row.status == '0',
                         delBut: scope.row.status != '0'
                       }"
                       @click="handleStartOrStop(scope.row)">
              {{ scope.row.status == '0' ? '启售' : '停售' }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination class="pageList"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="page"
                     :page-sizes="[10, 20, 30, 40, 50]"
                     :page-size="pageSize"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script lang="ts">
import {Component, Vue} from 'vue-property-decorator'
import HeadLable from '@/components/HeadLable/index.vue'

import InputAutoComplete from '@/components/InputAutoComplete/index.vue'
import Empty from '@/components/Empty/index.vue'
import {baseUrl} from '@/config.json'
import {deleteSetmeal, getSetmealPage} from "../../api/setMeal";
import {getCategoryByType} from "../../api/category";
import {getEmployeeList} from "../../api/employee";
import {enableOrDisableSetmeal, deleteSetmeal} from "../../api/setMeal";

@Component({
  name: 'package',
  components: {
    HeadLable,
    InputAutoComplete,
    Empty
  }
})
export default {
  data() {
    return {

      name: '',
      page: 1,
      pageSize: 10,
      total: 0,
      records: [],
      options: [],
      categoryId: '',
      statusArr: [
        {
          value: 0,
          label: '停售'
        },
        {
          value: 1,
          label: '启售'
        }
      ],
      status: '',
      multipleSelection: ''//当前表格选中的多个元素
    }
  },
  created() {
    getCategoryByType({type: 2}).then(res => {
      if (res.data.code === 1) {
        this.options = res.data.data
      }
    })
    //页面加载完成后实行分页
    this.pageQuery()
  },
  methods: {
    pageQuery() {
      const params = {
        name: this.name,
        status: this.status, categoryId: this.categoryId,
        page: this.page, pageSize: this.pageSize
      }
      getEmployeeList(params).then(res => {
        if (res.data.code === 1) {
          this.total = res.data.total
          this.records = res.data.data.records
        }
      }).catch(err => {
        this.$message.error('请求出错了' + err.message)
      })
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.pageQuery()
    },
    handleCurrentChange(page) {
      this.page = page
      this.pageQuery()
    },
    handleStartOrStop(row) {
      this.$confirm('确认要修改当前员工账号的状态吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const p = {
          id: row.id,
          status: !row.status ? 1 : 0
        }
        enableOrDisableSetmeal(p).then(res => {
          if (res.data.code === 1) {
            this.$message.success('套餐售卖状态修改成功!')
            this.pageQuery()
          }
        })
      })
    },
    handleDelete(type: String, id: String) {
      this.$confirm('确认要修改当前员工账号的状态吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let param = ''
        if (type == 'B') {
          const arry = new Array()
          this.multipleSelection.forEach(element => {
            arry.push(element.id)
          })
          param = arry.join(',')

        } else {
          param = id
        }
        deleteSetmeal(param).then(res => {
          if (res.data.code === 1) {
            this.$message.success('删除成功!')
            this.pageQuery()
          } else {
            this.$message.error(res.data.msg)
          }
        })
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val

    }
  }


}
</script>
<style lang="scss">
.el-table-column--selection .cell {
  padding-left: 10px;
}
</style>
<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;

    .container {
      background: #fff;
      position: relative;
      z-index: 1;
      padding: 30px 28px;
      border-radius: 4px;

      .tableBar {
        margin-bottom: 20px;

        .tableLab {
          float: right;

          span {
            cursor: pointer;
            display: inline-block;
            font-size: 14px;
            padding: 0 20px;
            color: $gray-2;
          }
        }
      }

      .tableBox {
        width: 100%;
        border: 1px solid $gray-5;
        border-bottom: 0;
      }

      .pageList {
        text-align: center;
        margin-top: 30px;
      }

      //查询黑色按钮样式
      .normal-btn {
        background: #333333;
        color: white;
        margin-left: 20px;
      }
    }
  }
}
</style>
